<template>
    <div class="login-dialog-container">
        <el-dialog
            title="登录"
            center
            :visible.sync="dialogVisible"
            width="400px"
            :close-on-click-modal="false"
            :before-close="beforeCloseHandle"
            custom-class="login-dialog-custom"
        >
            <el-form :rules="loginRules" :model="loginForm" ref="loginForm" class="login-box">
                <el-form-item label="用户名" prop="userName">
                    <el-input v-model="loginForm.userName" placeholder="请输入用户名或邮箱"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住我</el-checkbox>
                <el-row class="btn">
                    <el-button 
                        class="loginBtn" 
                        type="primary" 
                        @click.native.prevent="handleLogin">登录</el-button>
                    <el-button class="registerBtn" type="info" @click="register">注册</el-button>
                </el-row>
                

            </el-form>

            <div class="tip-message-box">
                <p>注册登录即表示同意 <a href="javascript:;">用户协议</a>、<a href="javascript:;">隐私政策</a></p>
            </div>

        </el-dialog>
    </div>
</template>

<script>
import {login, register} from '@/api/auth'
import {setToken} from "@/utils/auth";
import router from '@/router';
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'

export default {
    name: "LoginDialog",
    props: {},
    components: {},
    data() {
        return {
            // 登录框显示
            dialogVisible: true,
            loginForm: {
                userName: "zhangsan",
                password: "123456",
                rememberMe: false,
            },
            loginRules: {
                userName: [
                    {required: true, message: '请输入用户名', trigger: 'blur'},
                    { min: 5, message: "用户名长度大于等于 5 个字符", trigger: "blur" },
                    { max: 20, message: "用户名长度不能大于 20 个字符", trigger: "blur" }
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    { min: 5, message: "密码长度需要大于等于 5 个字符", trigger: "blur" },
                    { max: 20, message: "密码长度不能大于 20 个字符", trigger: "blur" }
                ]
            },
            // 重定向
            redirect: undefined
        }
    },
    watch: {
        $route: {
            handler: function(route) {
                this.redirect = route.query && route.query.redirect;
            },
            immediate: true
        }
    },
    created() {
        this.getCookie();
    },
    methods: {
        beforeCloseHandle(done) {
            this.$emit('closeLoginHandle')
            done()
        },
        handleLogin () {
            this.$refs.loginForm.validate((valid) => {
                if(valid) {
                    if (this.loginForm.rememberMe) {
                        Cookies.set("userName", this.loginForm.userName, { expires: 30 });
                        Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
                        Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
                    } else {
                        Cookies.remove("userName");
                        Cookies.remove("password");
                        Cookies.remove('rememberMe');
                    }
                    this.$store.dispatch("Login", this.loginForm).then(() => {
                        this.$store.dispatch("GetInfo").then(() => {
                           this.$router.push("/")
                           this.$emit('closeLoginHandle')
                        })
                        
                    })
                }
            })
        },
        register () {
            register(this.loginForm).then(() => {
                this.$message({
                        message: '注册成功，请登录',
                        type: 'success'
                    })
                
            })
        },
        getCookie() {
            const userName = Cookies.get("userName")
            const password = Cookies.get("password")
            const rememberMe = Cookies.get('rememberMe')
            this.loginForm = {
                userName: userName === undefined ? this.loginForm.userName : userName,
                password: password === undefined ? this.loginForm.password : decrypt(password),
                rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
            }
        },
    },
    
    computed: {},
    watch: {},
    mounted() {
    }
}
</script>

<style scoped lang="scss">
@import "LoginDialog";
</style>
